<html>
<head>
    <title>raphael流程图-http://my.oschina.net/lichaoqiang/</title>
    <!--<script src="jquery-1.6.2.min.js" type="text/javascript"> </script>-->
    <!--<script src="raphael.js" type="text/javascript"> </script>-->
    <script type="text/javascript" src="lib/raphael-min.js"></script>
    <script type="text/javascript"
            src="lib/jquery-ui-1.8.4.custom/js/jquery-1.4.2.min.js"></script>
    <style type="text/css">
        html, fieldet, legend, div, span, a, form, body{ margin: 0;padding: 0;  }
        body{ font-size:12px;}
        #holder{top: 0px;left: 0px;right: 0px;bottom: 0px; position: absolute;z-index: 999;height: auto;}
        .item{position: absolute; top: 0px; z-index: 0; padding: 0px; height: 30px; width: 200px;}
    </style>
</head>
<body>
<div id="holder"></div>
<div id="item1" class="item" data-item='{"nodeId":"1","nextNode":"2"}' title="请假申请">请假申请</div>
<div id="item2" class="item" data-item='{"nodeId":"2","nextNode":"3"}' title="开始审批">开始审批</div>
<div id="item3" class="item" data-item='{"nodeId":"3","nextNode":"4"}' title="部门审批">部门审批</div>
<div id="item4" class="item" data-item='{"nodeId":"4","nextNode":"5"}' title="单位审批">单位审批</div>
<div id="item5" class="item" data-item='{"nodeId":"5","nextNode":""}' title="领导批示">领导批示</div>
<script type="text/javascript">
    $(function () {
        //用来存储节点的顺序
        var connections = [];
        //拖动节点开始时的事件
        var dragger = function () {
            this.ox = this.attr("x");
            this.oy = this.attr("y");
            this.animate({ "fill-opacity": 0.2 }, 500);
        };
        //拖动事件
        var move = function (dx, dy) {
            var att = { x: this.ox + dx, y: this.oy + dy };
            this.attr(att);
            $("#item" + this.id).offset({ top: this.oy + dy + 10, left: this.ox + dx + 10 });
            for (var i = connections.length; i--; ) { r.drawArr(connections[i]); }
        };
        //拖动结束后的事件
        var up = function () { this.animate({ "fill-opacity": 0 }, 500); };
        //创建绘图对象
        var r = Raphael("holder", $(window).width(), $(window).height());
        //定义元素坐标高宽
        var $nodeList = $(".item"); //节点集合jquery对象
        var _x, _y, _w, _h, shapeLen;
        shapeLen = $nodeList.length; //节点数量
        _x = 190; _y = 100; _h = 60; _w = 40;
        var shapes = new Object(); //节点集合
        $nodeList.each(function (index, item) {
            _w = $(item).width(); //元素的宽
            _h = $(item).height(); //元素的高
            var r_y = (_h + 100) * index + 20;
            //节点json数据
            var data_item = $.parseJSON($(item).attr("data-item"));
            shapes[data_item.nodeId] = r.rect(_x, r_y, _w, _h, 4);
            $(item).offset({ top: r_y + 6, left: _x + 10 });
            //为节点添加样式和事件，并且绘制节点之间的箭头
            var color = Raphael.getColor();
            shapes[data_item.nodeId].attr({ fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 2, cursor: "move" });
            shapes[data_item.nodeId].id = index + 1;
            shapes[data_item.nodeId].drag(move, dragger, up); //拖动节点事件
            shapes[data_item.nodeId].dblclick(function () { alert(this.id) }); //绑定双击节点事件
            shapes[data_item.nodeId].attr("title", item.title);
            item.innerHTML=data_item.nodeId+item.innerHTML;
        });
        //存储节点间的顺序
        $nodeList.each(function (i, item) {
            //节点json数据
            var data_item = $.parseJSON($(item).attr("data-item"));
            if (data_item.nextNode)
            {
                connections.push(r.drawArr({ obj1: shapes[data_item.nodeId], obj2: shapes[data_item.nextNode] }));
            }
        });
    });
    //随着节点位置的改变动态改变箭头
    Raphael.fn.drawArr = function (obj) {
        var point = getStartEnd(obj.obj1, obj.obj2);
        var path1 = getArr(point.start.x, point.start.y, point.end.x, point.end.y, 8);
        if (obj.arrPath) {
            obj.arrPath.attr({ path: path1 });
        } else {
            obj.arrPath = this.path(path1);
        }
        return obj;
    };

    function getStartEnd(obj1, obj2) {
        var bb1 = obj1.getBBox(),
                bb2 = obj2.getBBox();
        var p = [
            { x: bb1.x + bb1.width / 2, y: bb1.y - 1 },
            { x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1 },
            { x: bb1.x - 1, y: bb1.y + bb1.height / 2 },
            { x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2 },
            { x: bb2.x + bb2.width / 2, y: bb2.y - 1 },
            { x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1 },
            { x: bb2.x - 1, y: bb2.y + bb2.height / 2 },
            { x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2 }
        ];
        var d = {}, dis = [];
        for (var i = 0; i < 4; i++) {
            for (var j = 4; j < 8; j++) {
                var dx = Math.abs(p[i].x - p[j].x),
                        dy = Math.abs(p[i].y - p[j].y);
                if (
                        (i == j - 4) ||
                        (((i != 3 && j != 6) || p[i].x < p[j].x) &&
                        ((i != 2 && j != 7) || p[i].x > p[j].x) &&
                        ((i != 0 && j != 5) || p[i].y > p[j].y) &&
                        ((i != 1 && j != 4) || p[i].y < p[j].y))
                ) {
                    dis.push(dx + dy);
                    d[dis[dis.length - 1]] = [i, j];
                }
            }
        }
        if (dis.length == 0) {
            var res = [0, 4];
        } else {
            res = d[Math.min.apply(Math, dis)];
        }
        var result = {};
        result.start = {};
        result.end = {};
        result.start.x = p[res[0]].x;
        result.start.y = p[res[0]].y;
        result.end.x = p[res[1]].x;
        result.end.y = p[res[1]].y;
        return result;
    }


    //获取组成箭头的三条线段的路径
    function getArr(x1, y1, x2, y2, size) {
        var angle = Raphael.angle(x1, y1, x2, y2); //得到两点之间的角度
        var a45 = Raphael.rad(angle - 45); //角度转换成弧度
        var a45m = Raphael.rad(angle + 45);
        var x2a = x2 + Math.cos(a45) * size;
        var y2a = y2 + Math.sin(a45) * size;
        var x2b = x2 + Math.cos(a45m) * size;
        var y2b = y2 + Math.sin(a45m) * size;
        var result = ["M", x1, y1, "L", x2, y2, "L", x2a, y2a, "M", x2, y2, "L", x2b, y2b];
        return result;
    }
</script>
</body>
</html>